<template>
  <div class="publish-container">
    <el-card class="publish-card" shadow="never">
      <div slot="header" class="card-header">
        <h3 class="card-title">发布新知识</h3>
      </div>

      <el-form 
        :model="form" 
        label-width="100px" 
        label-position="left"
        class="publish-form">
        
        <!-- 图片上传区域 -->
        <el-form-item label="上传图片">
          <el-upload
            class="image-uploader"
            :action="upurl"
            :headers="upheaders"
            :limit="3"
            :file-list="fileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            list-type="picture-card"
            :class="{ 'upload-disabled': noneBtnImg }">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="upload-tip">最多上传3张图片</div>
          </el-upload>
        </el-form-item>

        <!-- 标题输入 -->
        <el-form-item label="标题" prop="title">
          <el-input 
            v-model="form.title" 
            placeholder="请输入知识标题"
            clearable
            class="form-input">
          </el-input>
        </el-form-item>

        <!-- 内容输入 -->
        <el-form-item label="内容" prop="content">
          <el-input
            type="textarea"
            v-model="form.content"
            :rows="6"
            placeholder="请输入知识详细内容"
            resize="none"
            class="form-textarea">
          </el-input>
        </el-form-item>

        <!-- 发布按钮 -->
        <el-form-item class="form-footer">
          <el-button 
            type="primary" 
            @click="publishClick"
            :disabled="isDisabled"
            :loading="submitting"
            icon="el-icon-upload"
            class="publish-btn">
            发布知识
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addKnowledge } from "../api/knowledge";

export default {
  name: "PublishMessage",
  data() {
    return {
      form: {
        title: '',
        content: '',
        picPath: ''
      },
      fileList: [],
      noneBtnImg: false,
      submitting: false,
      upurl: this.$store.state.fileUploadRoad + "/file/upload/order",
      upheaders: {
        Authorization: window.localStorage.token,
      }
    };
  },
  props: {
    ctype: {
      type: String,
    },
  },
  computed: {
    isDisabled() {
      return !this.form.title || !this.form.content;
    }
  },
  methods: {
    handleError(err) {
      this.$message.error("图片上传失败");
      console.error(err);
    },
    handleSuccess(response, file, fileList) {
      if (response.flag) {
        this.fileList = fileList;
        this.form.picPath = response.data;
        this.noneBtnImg = fileList.length >= 3;
        this.$message.success(response.message);
      } else {
        this.$message.error(response.data);
      }
    },
    handleChange(file, fileList) {
      this.noneBtnImg = fileList.length >= 3;
    },
    handleRemove(file, fileList) {
      this.noneBtnImg = fileList.length >= 3;
      this.fileList = fileList;
    },
    async publishClick() {
      this.submitting = true;
      try {
        const res = await addKnowledge({
          title: this.form.title,
          content: this.form.content,
          picPath: this.form.picPath,
        });
        
        if (res.flag) {
          this.$message.success(res.message);
          this.$router.push("/home/user/published" + this.ctype);
        } else {
          this.$message.error(res.message);
        }
      } catch (err) {
        this.$message.error("发布失败");
        console.error(err);
      } finally {
        this.submitting = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.publish-container {
  padding: 20px;
  
  .publish-card {
    border-radius: 4px;
    
    .card-header {
      border-bottom: 1px solid #ebeef5;
      padding: 15px 20px;
      
      .card-title {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }
    }
    
    .publish-form {
      padding: 20px 30px;
      
      .image-uploader {
        /deep/ .el-upload {
          width: 150px;
          height: 150px;
          line-height: 150px;
        }
        
        .upload-tip {
          margin-top: 8px;
          font-size: 12px;
          color: #909399;
        }
      }
      
      .upload-disabled {
        /deep/ .el-upload {
          display: none;
        }
      }
      
      .form-input {
        width: 100%;
      }
      
      .form-textarea {
        width: 100%;
      }
      
      .form-footer {
        margin-top: 30px;
        text-align: center;
        
        .publish-btn {
          width: 200px;
        }
      }
    }
  }
}
</style>